<template>
  <div class="app-container">
      <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="100px">
            <el-form-item label="所属公司">
                <treeselect v-if="company" style="width: 199px;height: 32px" v-model="selectForm.deptId" :options="company" placeholder="请选择所属公司"/>
            </el-form-item>
            <el-form-item label="姓名" >
                <el-input v-model="selectForm.nickName" placeholder="请输入姓名" clearable size="small"/>

            </el-form-item>
            <el-form-item label="资质证书">
                <el-select
                v-model="selectForm.aptitudeId"
                clearable
                size="small"
                >
                <el-option
                    v-for="dict in qualificaeList"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="职责">
                <el-select v-model="selectForm.responsibilityId" size="small" clearable>
                    <el-option
                    v-for="item in dutyList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="selectForm.pageNum=1;getList();">搜索</el-button>
                <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
                <el-button size="mini" type="info" icon="el-icon-upload">导入</el-button>
                <!-- <el-button size="mini" type="danger" icon="el-icon-download" @click="dels">删除</el-button> -->
                
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange" stripe>
            <el-table-column align="center" type="selection" width="55"/>
            <el-table-column align="center" type="index" label="序号"  width="55"/>
            <el-table-column align="center" label="姓名"  property="nickName"/>
            <el-table-column align="center" label="性别"  property="sex">
                <template slot-scope="scope" >
                    <span v-show="scope.row.sex=='0'">男</span>
                    <span v-show="scope.row.sex=='1'">女</span>
                    <span v-show="scope.row.sex=='2'">未知</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="联系电话"  property="phoneNumber"/>
            <el-table-column align="center" label="职责"  property="responsibilitys"/>
            <el-table-column align="center" label="资质证书"  property="aptitudes"/>
            <el-table-column align="center" label="所属部门"  property="deptName"/>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column> 
        </el-table>
        <pagination :total="total" :page.sync="selectForm.pageNum" :limit.sync="selectForm.pageSize" @pagination="getList"/>
  </div>
</template>

<script>
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {implementList,implementDels,qualifications,duty} from '@/api/personnelMent/index'
export default {
    components: {
        Treeselect,
    },
    data(){
        return{
            selectForm:{
                pageNum:1,
                pageSize:10
            },
            company:null,
            loading:false,
            list:[],
            total:0,
            selectList:[],
            qualificaeList:[],
            dutyList:[]
        }
    },
    created(){
        this.getTree()
        this.getQualifications()
        this.getDuty()
        this.getList()
    },
    methods:{
        getTree() {
            treeselect().then(response => {
            this.company = response.data;
            });
        },
        getQualifications(){
            qualifications().then(res => {
                if(res.code==200)this.qualificaeList=res.data
            })
        },
        getDuty(){
            duty().then(res => {
                if(res.code==200)this.dutyList=res.data
            });
        },
        handleSelectionChange(info){
            this.selectList=info
        },
        getList(){
            this.loading=true
            implementList(this.selectForm).then((res)=>{
                if(res.code==200){
                    this.list=res.rows
                    this.total=res.total
                    this.loading=false
                }
            })
        },
        add(){
            this.$router.push({path:'/personnelMent/impEdit'})
        },
        edit(row){
            this.$router.push({path:'/personnelMent/impEdit',query:{id:row.id}})
        },
        dels(){
            //批量删除
            if(this.selectList.length<=0){
                this.$message.warning('请选择行')
                return false
            }
            this.$confirm('确定批量删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                let arr=[]
                this.selectList.forEach((i)=>{
                    arr.push(i.id)
                })
                this.shanchu(arr)
            }).catch(() => {
                this.$message.info('取消删除')
            })
        },
        del(row){
            //删除
            this.$confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                this.shanchu(row.id)
            }).catch(() => {
                this.$message.info('取消删除')
            })
        },
        shanchu(id){
            implementDels(id).then((res)=>{
                if(res.code==200){
                    this.$message.success(res.msg)
                    this.getList()
                }
            })
        }
    }
}
</script>

<style>

</style>